/**
 * @license
 * Copyright JINSCOP. All Rights Reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */

// locally used mixin
@mixin hover-checked-border($color) {
  .custom-control-input:hover ~ .custom-control-indicator,
  .custom-control-input:checked ~ .custom-control-indicator,
  .custom-control-input:hover:checked ~ .custom-control-indicator {
    border-color: $color;
  }
}

@mixin custom-forms() {
  .custom-control {
    margin: 0;
    min-height: inherit;
    padding: 0.375rem 1.5rem;
    display: flex;
    align-items: center;

    .custom-control-indicator {
      background-color: nb-theme(checkbox-bg);
      border-radius: 50%;
      width: nb-theme(checkbox-size);
      height: nb-theme(checkbox-size);
      border: nb-theme(checkbox-border-size) solid nb-theme(checkbox-border-color);
      flex-shrink: 0;
      position: absolute;
      @include nb-ltr(left, 0);
      @include nb-rtl(right, 0);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    &.custom-checkbox > .custom-control-input:checked ~ .custom-control-indicator::before {
      content: '';
      width: 0.5rem;
      height: 0.75rem;
      border: solid nb-theme(checkbox-fg);
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }

    .custom-control-label {
      &::before {
        top: auto;
      }

      &::after {
        top: 0.35rem;
      }
    }

    &.custom-radio > .custom-control-input:checked ~ .custom-control-indicator::before {
      content: '';
      width: 0.75rem;
      height: 0.75rem;
      background-color: nb-theme(radio-fg);
      border-radius: 50%;
      position: absolute;
    }

    .custom-control-input {
      background-color: transparent;

      &:focus ~ .custom-control-indicator {
        box-shadow: none;
      }

      &:checked ~ .custom-control-indicator {
        background-image: none;
        display: flex;
        justify-content: center;
      }

      &:disabled ~,
      &:disabled:hover ~ {
        .custom-control-indicator {
          background-color: transparent;
          border-color: nb-theme(checkbox-border-color);
          opacity: 0.5;
        }

        .custom-control-description {
          color: nb-theme(checkbox-fg);
          opacity: 0.5;
        }
      }

      &:checked ~ .custom-control-indicator,
      &:active ~ .custom-control-indicator {
        background-color: nb-theme(checkbox-bg);
      }
    }

    @include hover-checked-border(nb-theme(checkbox-selected-border-color));
    &.success {
      @include hover-checked-border(nb-theme(color-success));
    }
    &.warning {
      @include hover-checked-border(nb-theme(color-warning));
    }
    &.danger {
      @include hover-checked-border(nb-theme(color-danger));
    }

    .custom-control-description {
      padding-left: 0.25rem;
      padding-right: 0.25rem;
      color: nb-theme(color-fg-heading);
    }
  }
}

